/*
 * @Description: 登录页面
 * @Author: Yong
 * @Date: 2021-09-27 11:34:29
 * @LastEditTime: 2021-09-27 17:40:35
 */

import React, { Component } from 'react'
import { WingBlank, WhiteSpace, Toast } from 'antd-mobile'
// 导入withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

import NavHeader from '../../components/NavHeader'
import styles from './index.module.css'
import { login } from '../../apis/user'
import { setToken } from '../../utils'
// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {

    render () {
        return (
            <div className={styles.root}>
                {/* 顶部导航 */}
                <NavHeader className={styles.navHeader}>账号登录</NavHeader>
                <WhiteSpace size="xl" />
                {/* 登录表单 */}
                <WingBlank>
                    <Form>
                        {/* 账号 */}
                        <div className={styles.formItem}>
                            <Field
                                className={styles.input}
                                name="username"
                                placeholder="请输入账号"
                            />
                        </div>
                        <ErrorMessage
                            className={styles.error}
                            name="username"
                            component="div"
                        />
                        {/* 密码 */}
                        <div className={styles.formItem}>
                            <Field
                                className={styles.input}
                                name="password"
                                type="password"
                                placeholder="请输入密码"
                            />
                        </div>
                        <ErrorMessage
                            className={styles.error}
                            name="password"
                            component="div"
                        />
                        <div className={styles.formSubmit}>
                            <button className={styles.submit} type="submit">
                                登 录
                            </button>
                        </div>
                    </Form>
                </WingBlank>
            </div>
        )
    }
}

Login = withFormik({
    // 提供状态：
    mapPropsToValues: () => ({ username: '', password: '' }),

    validationSchema: Yup.object().shape({
        username: Yup.string().required('账号为必填').matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
        password: Yup.string().required('密码为必填项').matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
    }),

    handleSubmit: async (values, { props }) => {
        // 获取账号和密码
        const { username, password } = values
        try {
            const { token } = await login({ username, password })
            // 登录成功 - 缓存token
            setToken(token)
            if (!props.location.state) {
                // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
                props.history.go(-1)
            } else {
                props.history.replace(props.location.state.from.pathname)
            }
        }
        catch (e) { }
    }
})(Login)


export default Login